<!--
 * @Author: Olivia
 * @Date: 2023-02-13 22:44:57
 * @custom_string_Olivia: Less is more
-->
<template>
    <div class="user-profile">
        <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="$router.back()" />
        <input type="file" hidden ref="file" @change="onChangeFile">
        <!-- 个人信息 -->
        <van-cell title="头像" is-link @click="$refs.file.click()">
            <van-image round class="avatar" :src="userProfile.photo" />
        </van-cell>
        <van-cell @click="changeGenderShow = true" title="性别" is-link
            :value="userProfile.gender == '0' ? '男' : '女'"></van-cell>
        <van-cell @click="changeNameShow = true" title="昵称" is-link :value="userProfile.name">
        </van-cell>
        <van-cell @click="changeBirthdayShow = true" title="生日" is-link :value="userProfile.birthday"></van-cell>
        <!-- 个人信息 -->
        <!-- 昵称弹出层 -->
        <van-popup v-model="changeNameShow" style="height: 100%;width: 100%;background-color: rgb(245, 247, 249);">
            <update-name v-if="changeNameShow" v-model="userProfile.name" @close="changeNameShow = false" />
        </van-popup>
        <!-- 昵称弹出层 -->
        <!-- 性别弹出层 -->
        <van-popup v-model="changeGenderShow" style="width: 100%;background-color: rgb(245, 247, 249);" position="bottom">
            <update-gender v-if="changeGenderShow" v-model="userProfile.gender"
                @close="changeGenderShow = false"></update-gender>
        </van-popup>
        <!-- 性别弹出层 -->
        <!-- 生日弹出层 -->
        <van-popup v-model="changeBirthdayShow" style="width: 100%;background-color: rgb(245, 247, 249);" position="bottom">
            <UpdateBirthday v-if="changeBirthdayShow" @close="changeBirthdayShow = false" v-model="userProfile.birthday" />
        </van-popup>
        <!-- 生日弹出层 -->
        <!-- 头像弹出层 -->
        <van-popup v-model="changeImgShow" style="height: 100%;" position="bottom">
            <UpdateImg v-if="changeImgShow" :img="img" @close="changeImgShow = false"
                @update-photo="userProfile.photo = $event" />
        </van-popup>
        <!-- 头像弹出层 -->
    </div>
</template>
<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdateImg from './components/update-img.vue'
export default {
    name: 'UserProfile',
    components: {
        UpdateName,
        UpdateGender,
        UpdateBirthday,
        UpdateImg
    },
    data() {
        return {
            userProfile: {}, // 个人用户资料
            changeNameShow: false,
            changeGenderShow: false,
            changeBirthdayShow: false,
            changeImgShow: false,
            img: null
        }
    },
    created() {
        this.loadUserProfile()
    },
    computed: {
    },
    methods: {
        // 查询用户资料
        async loadUserProfile() {
            try {
                const { data } = await getUserProfile()
                this.userProfile = data.data
                console.log('this.userProfile', this.userProfile);
            } catch (error) {
                this.$toast('获取用户个人资料失败')
            }
        },
        onChangeFile() {
            const file = this.$refs.file.files[0] // 获取文件对象
            const imgUrl = window.URL.createObjectURL(file)  // 基于文件对象获取blob数据
            this.img = imgUrl
            this.changeImgShow = true // 展示预览图片弹出层
            this.$refs.file.value = '' // file-imput如果选择了同一个文件不会触发change事件，每次使用完毕，清空value
        }
    }
}
</script>
<style lang='less'  scoped>
.user-profile {
    .avatar {
        width: 30px;
        height: 30px;
    }
}

.van-popup--center {
    bottom: -18%;
}
</style>
